<script setup lang="ts">
import { ref } from 'vue'

const saleData = ref({
    c_au_dt: "2024-07-20 14:14:15.180",
    c_gname: "商品名称",
    c_deduct_rate: 10,
    c_sale_amt: 100,
    c_sale_qty: 10,
    c_sale_unit_price: 10,
    c_status: "正常销售,,,暂停进货",
});

const datacolSpanItems = [
    {
        label: "销售日期",
        prop: "c_au_dt",
        type: "text",
        colSpan: 12,
        element: {
            mode: "YYYY-MM-DD",
        },
    },
    {
        label: "商品名称",
        prop: "c_gname",
        type: "text",
        colSpan: 12,
        element: {
        },
    },
    {
        label: "扣率",
        prop: "c_deduct_rate",
        type: "text",
        colSpan: 12,
        element: {
            precision: 2,
        },
    },
    {
        label: "销售金额",
        prop: "c_sale_amt",
        type: "text",
        colSpan: 12,
        element: {
            precision: 2,
        },
    },
    {
        label: "销售数量",
        prop: "c_sale_qty",
        type: "text",
        colSpan: 12,
        element: {
        },
    },
    {
        label: "销售单价",
        prop: "c_sale_unit_price",
        type: "text",
        colSpan: 12,
        element: {
            precision: 2,
        },
    },
]

const dataItems = [
    {
        label: "销售日期",
        prop: "c_au_dt",
        type: "text",
        element: {
            mode: "YYYY-MM-DD HH:mm:ss",
        },
    },
    {
        label: "商品名称",
        prop: "c_gname",
        type: "text",
        element: {
        },
    },
    {
        label: "扣率",
        prop: "c_deduct_rate",
        type: "text",
        element: {
            precision: 2,
        },
    },
    {
        label: "销售金额",
        prop: "c_sale_amt",
        type: "text",
        element: {
            precision: 2,
        },
    },
    {
        label: "销售数量",
        prop: "c_sale_qty",
        type: "text",
        element: {
            precision: 0
        },
    },
    {
        label: "销售单价",
        prop: "c_sale_unit_price",
        type: "text",
        element: {
            precision: 2,
        },
    },
    {
        label: "",
        prop: "c_status",
        type: "tag",
        element: {
            type: "success",
            size: "mini",
            shape: "circle",
            plain: true,
        },
    }

]

</script>

<route lang="json">{
    "style": {
        "navigationBarTitleText": "Pageframe"
    }
}</route>

<template>
    <eui-background type="white" distanceToBottom="200" showBottom="false">
        <template #top>
            <eui-nav-bar title="测试标题" color="#000000" rightIcon="" />
        </template>
        <template #main>
            <!-- <eui-page> -->
                <!-- <eui-page-content> -->
                <eui-base-card title="基本用法">
                    <eui-detail-show :items="dataItems" v-model="saleData"></eui-detail-show>
                </eui-base-card>
                <eui-base-card title="标题固定宽度">
                    <eui-detail-show :items="dataItems" v-model="saleData" labelWidth="80px"></eui-detail-show>
                </eui-base-card>

                <eui-base-card title="内容居右">
                    <eui-detail-show :items="dataItems" v-model="saleData" textAlign="right"></eui-detail-show>
                </eui-base-card>

                <eui-base-card title="标题显示冒号">
                    <eui-detail-show :items="dataItems" v-model="saleData" :colon=true></eui-detail-show>
                </eui-base-card>

                <eui-base-card title="显示分隔线">
                    <eui-detail-show :items="dataItems" v-model="saleData" :colon=true
                        :borderBottom="true"></eui-detail-show>
                </eui-base-card>

                <eui-base-card title="一行两列">
                    <eui-detail-show :items="datacolSpanItems" v-model="saleData"></eui-detail-show>
                </eui-base-card>

                <eui-base-card title="small size">
                    <eui-detail-show :items="datacolSpanItems" v-model="saleData" size="small"></eui-detail-show>
                </eui-base-card>

                <eui-base-card title="normal size">
                    <eui-detail-show :items="datacolSpanItems" v-model="saleData" size="normal"></eui-detail-show>
                </eui-base-card>

                <eui-base-card title="large size">
                    <eui-detail-show :items="datacolSpanItems" v-model="saleData" size="large"></eui-detail-show>
                </eui-base-card>
                <!-- </eui-page-content> -->
            <!-- </eui-page> -->
        </template>
    </eui-background>
</template>

<style lang="scss"></style>